<template>
  <div class="flex flex-col" @click="handleGotoDetail">
    <img :src="fileBaseUrl + data.pic" class="w-full rounded-t-3" alt="">
    <div class="flex flex-col rounded-b-3 bg-white p-y-2 p-l-2">
      <span class="truncate text-3.5 font-600">{{ data.name }}</span>
      <p class="flex items-center gap-1 text-#F7580A">
        <span class="text-3 font-600">{{ data.score }}</span>
        <span class="text-2.5">积分</span>
      </p>
    </div>
  </div>
</template>

<script lang='ts' setup>
import type { IGoodsData } from '@/api/mall/types'

interface Props {
  data: IGoodsData
}

const props = withDefaults(defineProps<Props>(), {
  data: () => ({} as IGoodsData),
})

const router = useRouter()
const fileBaseUrl = import.meta.env.VITE_GLOB_IMG_URL
function handleGotoDetail() {
  router.push({
    path: '/goods-detail',
    query: {
      id: props.data.id,
    },
  })
}
</script>

<style lang='less' scoped>
</style>
